<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>牛※马音乐</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <style>
    .no-wrap {
      word-spacing: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .au {
      width: 300px;
      height: 50px;
      background-color: #f7f4f4;
      border: 2px solid #97f500;
      border-radius: 5px;
      grid-template: 10px;
      display: none;
    }
    .lrc {
      display: none;
    }
  </style>
  <body>
    <div id="app">
      <div class="lrc">
        <div>
          <p id="singer"></p>
          <p id="musicName"></p>
        </div>
        <div class="wrapper">
          <div class="inner" :style="{ marginTop: (-31 * lrcline ) + 'px'}">
            <p
              v-for="(x,i) in lrclist"
              class="line"
              :class="{playing:i==lrcline}"
            >
              {{ x.lineLyric }}
            </p>
          </div>
        </div>
      </div>
      <div class="header">
        <div class="nav">
          <div>
            <a href="#" target="_blank">
              <img src="img/logo.png" alt="" />
              <span @click="hh(a)">🐮※🐴</span>
            </a>
          </div>
          <div>
            <input
              v-model="key"
              id="keyWord"
              type="text"
              placeholder="歌手|专辑|歌曲名"
            /><button @click="loadlist" id="search">🔍</button>
          </div>
          <div>
            <img id="playingImg" src="img/music.png" alt="" />
            <p id="playing"></p>
            <p id="detail"></p>
            <audio class="au" ref="audio" style="margin: 0 auto; clear: both;" controls></audio>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="nav">
          <ul>
            <li>推荐</li>
            <li>排行榜</li>
            <li>歌手</li>
            <li>歌单</li>
            <li>MV</li>
          </ul>
        </div>
        <div class="swiper">
          <div class="slider">
            <img src="img/1670595626357_.jpg" title="小小威" />
          </div>
          <div class="pointer">
            <ul>
              <li class="show"></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="bottom">
            <div></div>
            <div>
              <ul>
                <li>
                  <a href="#" style="color: rgb(251, 254, 255)">下载PC版</a>
                </li>
                <li>
                  <a href="#" style="color: rgb(255, 255, 255)"
                    >下载Android版</a
                  >
                </li>
                <li>
                  <a href="#" style="color: rgb(255, 255, 255)">下载iPhone版</a>
                </li>
                <li>
                  <a href="#" style="color: rgb(255, 255, 255)">下载其他版本</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="list">
          <div>
            <span>搜索结果</span>
          </div>
          <table>
            <thead>
              <tr>
                <th colspan="2">序号</th>
                <th>歌曲</th>
                <th>歌手</th>
                <th>专辑</th>
                <th>时长</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(m, i) in list" class="mtr">
                <td>{{ i+1 }}</td>
                <td><img :src="m.pic" alt="" /></td>
                <td>
                  <div class="no-wrap" style="width: 150px; text-align: center">
                    {{ m.name }}
                  </div>
                </td>
                <td>
                  <div class="no-wrap" style="width: 150px; text-align: center">
                    {{ m.artist }}
                  </div>
                </td>
                <td>
                  <div class="no-wrap" style="width: 150px; text-align: center">
                    {{ m.album }}
                  </div>
                </td>
                <td>{{ m.songTimeMinutes }}</td>
                <td>
                  <img @click="play(m)" class="btn" src="img/play.png" />
                  <img @click="dowload(m)" class="btn" src="img/down.png" />
                  <img @click="playMv(m)" v-if="m.hasmv==1" class="btn" src="img/wmv.png" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <script src="js/vue-2.6.10.js"></script>
    <script src="js/axios-1.3.4.js"></script>
    <script>
      //创建http实例
      let http = axios.create({
        baseURL: "https://www.wx992.com/",
      });

      //创建Vue实例
      new Vue({
        el: "#app",
        data() {
          return {
            key: "林俊杰",
            list: [], //歌曲列表
            lrclist: [], //歌词列表
            lrcline: 0,
          };
        },
        methods: {
          hh(a){
            alert('欢迎来到牛马星');
            return;
          },
          //方法组
          loadlist() {
            //加载歌曲列表
            http.get("/api/music/search?key=" + this.key).then((r) => {
              this.list = r.data.data.list;
            });
          },
          play(m) {
            document.querySelector(".au").style.display = "block";
            //播放歌曲
            document.querySelector(".lrc").style.display = "block";
            //请求mp3
            http.get("/api/music/24316eb1/" + m.rid).then((r) => {
              // console.log(r.data.data.url);
              this.$refs.audio.src = r.data.data.url;
              this.$refs.audio.play();
            });
            //请求歌词
            http.get("/api/music/lrc/" + m.rid).then((r) => {
              this.lrclist = r.data.data.lrclist;
            });
          },
          dowload(m){//下载歌曲
            http.get("/api/music/24316eb1/" + m.rid).then((r) => {
              window.open(r.data.data.url);
            });
          },
          playMv(m){//播放MV
            window.open("mv.html#" + m.rid);
          }
        },
        created() {
          //页面加载
          this.loadlist();
          //回调函数
          //每秒检查播放进度
          setInterval(() => {
            let time = this.$refs.audio.currentTime;
            if (!time) {
              this.lrcline = 0;
              return;
            }
            if (this.lrclist.length == 0) {
              this.lrcline = 0;
              return;
            }
            this.lrclist.forEach((x, i) => {
              if (time > x.time) {
                this.lrcline = i;
                return false;
              }
            });
          }, 1000);
        },
      });
    </script>
  </body>
</html>
